<template>
  <Layout class="my-layout">
    <LayoutSider :width="180" class="my-sider"
      :collapsed="collapsed" />
    <LayoutSider :width="180"
      class="my-sider my-sider-fixed"
      v-model:collapsed="collapsed">
      <div class="my-sider-children">
        <div class="collapsedButton"
          @click="collapsed = !collapsed">
          <IndentDecrease v-if="!collapsed"
            :size="16" />
          <IndentIncrease v-else :size="16" />
        </div>
        <Menu style="background: none"
          :openKeys="openKeys"
          :selectedKeys="selectedKeys"
          mode="inline"
          :items="menus" />
      </div>
    </LayoutSider>
    <LayoutHeader class="my-header" />
      <LayoutHeader class="my-header my-header-fixed">
      <BiliHeader title="LC·光锥" />
    </LayoutHeader>
    <Layout>
      <LayoutHeader class="my-header" />
      <LayoutHeader class="my-header my-header-fixed">
        <BiliHeader title="LC·光锥" />
      </LayoutHeader>
      <LayoutContent class="my-content">
        <RouterView />
      </LayoutContent>
    </Layout>
  </Layout>
</template>
<script setup lang="tsx">
import {
  Layout,
  Menu,
} from 'ant-design-vue';
import {
  House,
  IndentDecrease,
  IndentIncrease,
} from 'lucide-vue-next';
import { computed, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

import BiliHeader from './BiliHeader.vue';

const LayoutHeader = Layout.Header;
const LayoutContent = Layout.Content;
const LayoutSider = Layout.Sider;
const route = useRoute();

const selectedKeys = ref([route.path]);
const current = ref({} as any);
const openKeys = ref<string[]>(['/app']);

const menus = computed(() => [
  {
    label: 'Home',
    key: '/index',
    icon: <House size={16} />,
  },
]);

const handleSetTitle = (key: string) => {
  current.value = menus.value.find((i) => i.key && key.includes(i.key)) || {};
  document.title = `${current.value.label} - 光锥`;
  selectedKeys.value = menus.value
    .filter((i) => key.includes(i.key))
    .map((i) => i.key);
};

const collapsed = ref(false);
onMounted(() => {
  handleSetTitle(route.path);
});
</script>
<style lang="less">
body {
  background-color: var(--color-bg2);
}

#app {
  max-width: 1440px;
  padding: 0 20px;
  margin: auto;
}

.ant-menu-light.ant-menu-root.ant-menu-inline {
  border: none;
}

.ant-menu-light.ant-menu-root.ant-menu-vertical {
  border: none;
}

.ant-menu-light.ant-menu-inline .ant-menu-item {
  border-radius: 4px;
  margin-right: 16px;
  margin-left: 0;
  padding-left: 12px !important;
  width: calc(100% - 16px);
  height: 36px;
  line-height: 36px;
}

.ant-menu-item {
  position: relative;

  &::before {
    content: '';
    width: 4px;
    border-radius: 3px;
    height: 18px;
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.1s;
  }
}

.ant-menu-item.ant-menu-item-selected {
  font-weight: 500;
  background-color: var(--color-bg1);

  &::before {
    background-color: var(--color-primary);
  }
}

.ant-layout .ant-layout-sider-trigger {
  background-color: #fbfbfb;
  color: var(--color-text1);
  border: 1px solid var(--color-border-regular);
}

.ant-menu .ant-menu-item-group-title {
  font-size: 12px;
  padding: 8px 12px 4px;
  color: var(--color-text3);
}
</style>
<style lang="less" scoped>
.collapsedButton {
  position: absolute;
  inset-block-end: 14px;
  z-index: 11;
  width: 28px;
  height: 28px;
  text-align: center;
  border-radius: 14px;
  inset-inline-end: -13px;
  color: var(--color-text2);
  transition: transform 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: var(--color-bg1);
  border: 1px solid var(--color-border-regular);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05),
    0 1px 4px -1px rgba(25, 15, 15, 0.07), 0 0 1px 0 rgba(0, 0, 0, 0.08);
}

.my-layout {
  min-height: 100vh;
}

.my-header {
  line-height: normal;
  height: 46px;
  padding: 0;
}

.my-content {
  width: 100%;
  margin: 0 auto;
  padding: 16px 0 16px 0px;
}

.my-header-fixed {
  position: fixed;
  width: 100%;
  z-index: 10;
  background-color: var(--color-bg1);
  inset-block-start: 0;
  inset-inline-end: 0;
  border-block-end: 1px solid var(--color-border-regular);
}

.my-sider {
  background: none;

  .my-sider-children {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}

.my-sider-fixed {
  height: calc(100% - 78px);
  inset-block-start: 62px;
  position: fixed !important;
  z-index: 100;
}
</style>
